import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
import './App.css'
import { Component } from 'react'

export default class App extends Component {
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '刷哔站', done: false },
      { id: '004', name: '打代码', done: true }
    ]
  }

  addTodo = (task) => {
    const { todos } = this.state
    this.setState({
      todos: [task, ...todos]
    })
  }

  updateTodo = (id, done) => {
    const { todos } = this.state
    const newTodos = todos.map(item => {
      if (item.id === id) {
        item.done = done
      }
      return item
    })
    this.setState({
      todos: newTodos
    })
  }

  deleteTodo = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter(item => item.id !== id)
    this.setState({
      todos: newTodos
    })
  }

  checkAll = (done) => {
    const { todos } = this.state
    const newTodos = todos.map(item => {
      return {...item, done: done}
    })
    this.setState({
      todos: newTodos
    })
  }

  handleClearDone = () => {
    const { todos } = this.state
    const newTodos = todos.filter(item => !item.done)
    this.setState({
      todos: newTodos
    })
  }

  render () {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
          <Footer todos={todos} checkAll={this.checkAll} handleClearDone={this.handleClearDone} />
        </div>
      </div>
    )
  }
}
